<template>
	
	<view>
		<u-line color="#d5d5d5" /> 
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10">
				<u-avatar :src=user.userImg size="140"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{user.userName}}</view>
				<view class="u-font-14 u-tips-color">ID：{{user.account}}</view>
			</view>
			<view class="u-m-l-20 u-p-20">
				<u-button :ripple="true" :type=b_yupe ripple-bg-color="#909399" @click="guanzhu()" v-if="is_myself">{{txt}}</u-button>
			</view>

		</view>
		
		
		
		<view class="u-m-t-0">
			<u-cell-group>
				<u-cell-item icon="man-add" title="年龄:" :arrow="false">{{user.age}}</u-cell-item>
				<u-cell-item icon="map" title="城市:" :arrow="false">{{user.city}}</u-cell-item>
				<u-cell-item icon="man" title="性别:" :arrow="false">{{xingbie}}</u-cell-item>
				<u-cell-item icon="edit-pen" title="个性签名:" :arrow="false">{{user.sign}}</u-cell-item>
				<u-cell-item icon="phone" title="联系方式:" :arrow="false">{{user.phone}}</u-cell-item>
			</u-cell-group>
		</view>
		<u-divider fontSize=30 color="#000000" bg-color="#ffffff">TA的博客</u-divider>
		<!-- 博客展示 -->
			
		<view v-for="(item,index) in blog" :key="item.id">
			<u-gap height="20" bg-color="#ffffff"></u-gap>

			<!-- 博客：标题 主体 图片 -->
			<view class="allboke" @click="goBoke(item)">
				<view class="boke">
					<view class="bokeTitle"> 
						<text class="titleText">{{item.title}}</text>
					</view>
					
					<u-line color="#d5d5d5" /> <!-- 标题与正文分割线 -->
					
					<view class="bokeBody">  <!-- 主题 -->
						<text class="text">{{item.content}}</text>
					</view>
				</view>
				<image :src=item.blogImg class="boke_pic"></image>
			</view>
			
			<!-- 博客主体，点赞关注之间的分割线 -->
			<u-line color="#d5d5d5" /> 
			<u-gap height="10" bg-color="#e1e1e1"></u-gap>
			<u-line color="#d5d5d5" />
		</view>
		<!-- 返回顶部 -->
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</view>
	

</template>

<script>
	export default {
		data() {
			return {
				scrollTop:1,
				show:true,
				xingbie:"女", //性别，默认为女
				myId:"",
				myCity:"",
				is_gz:false,  //是否已经关注
				b_yupe:"primary",  //关注按钮的样式，没关注primary，关注了default
				txt:"关注",			//未关注则显示“关注”，已关注则显示“已关注”
				is_myself:true,    //是否是我自己的资料卡
				user:[			//博客内容
					{
					userId:"",   //用户Id
					userName:"",     //用户名
					account:"",      //用户账户名
					city:"",         //用户所在城市
					sign:"",        //用户签名
					userImg:"",       //用户头像
					blogId:"",   //博客Id
					typeId:"",   //博客类型Id
					title:"", //博客标题
					content:"",         //博客内容
					time:"",   //博客发表时间
					blogImg:"",        //博客图片地址
					favornum:"",     //点赞数 如果没有点赞则返回null
					collectnum:"",   //收藏数 如果没有收藏则返回null
					commentsnum:"",  //评论数 如果没有评论则返回null
					password:"",    //用户密码
					phone:"",         //用户电话
					age:"",             //用户年龄
					sex:"",           //用户性别
					followId:""       ,//被关注者的id
					}
				], 
				blog:[],
				is_gz:false,  //是否已经关注
				b_yupe:"primary",  //关注按钮的样式，没关注primary，关注了default
				txt:"关注"			//未关注则显示“关注”，已关注则显示“已关注”
			}
		},
		onPageScroll(e) {   	//用于回到顶部组件获取位置
			this.scrollTop = e.scrollTop;
		},
		onShow(){
			this.myId=getApp().globalData.globalUserid;
			this.myCity=getApp().globalData.globalUsercity;
			if(this.user.sex==1)
						{
							this.xingbie="男";
						}
						if(this.user.userId==this.myId){
							this.is_myself=false;
						}
						else{
				//----------查询是否已经关注 ------------------------------------------------------------------------------
							console.log("else");
							uni.request({
							url:"http://localhost:9090/addFollowLogic?userId="+this.myId+"&followId="+this.user.userId,
							method:"GET",
							success:(res)=>{
								console.log(res);
									//成功，code 200,未关注
									if(res.data.code*1==200){
										this.is_gz=false;  
										this.txt="关注";
										this.b_yupe="primary";
										
									}
									//成功，code 2011,已经关注
									
									else if(res.data.code*1==2011){
										this.is_gz=true;
										this.txt="已关注";
										this.b_yupe="default";
										
									}
								 //失败code 201，异常
									else{
										this.$u.toast("关注数据异常");
									}
								}  
							 });
							
						}
			//--------------查询当前用户的博客列表--------------------------------
						uni.request({
						url:"http://localhost:9090/MyBlog?UserId="+this.user.userId,
						method:"GET",
						success:(res)=>{
							console.log(res);
								//成功，code 200,更新博客列表
						 		if(res.data.code*1==200){
									uni.setStorageSync("user",res.data.result);
									this.blog=res.data.result;
						 		}
						 		//失败,code  201
						 		else{
										this.$u.toast("出错了");
						 		}
						 	}  
						 });
		},
		onLoad(query) {
			this.myId=getApp().globalData.globalUserid;
			this.myCity=getApp().globalData.globalUsercity;
			if (query.item) {
				this.user= JSON.parse(decodeURIComponent(query.item));
				console.log("传过来的用户ID:"+this.user.userId);
				}
			if(this.user.sex==1)
			{
				this.xingbie="男";
			}
			if(this.user.userId==this.myId){
				this.is_myself=false;
			}
			else{
	//----------查询是否已经关注 ------------------------------------------------------------------------------
				console.log("else");
				uni.request({
				url:"http://localhost:9090/addFollowLogic?userId="+this.myId+"&followId="+this.user.userId,
				method:"GET",
				success:(res)=>{
					console.log(res);
						//成功，code 200,未关注
						if(res.data.code*1==200){
							this.is_gz=false;  
							this.txt="关注";
							this.b_yupe="primary";
							
						}
						//成功，code 2011,已经关注
						
						else if(res.data.code*1==2011){
							this.is_gz=true;
							this.txt="已关注";
							this.b_yupe="default";
							
						}
					 //失败code 201，异常
						else{
							this.$u.toast("关注数据异常");
						}
					}  
				 });
				
			}
//--------------查询当前用户的博客列表--------------------------------
			uni.request({
			url:"http://localhost:9090/MyBlog?UserId="+this.user.userId,
			method:"GET",
			success:(res)=>{
				console.log(res);
					//成功，code 200,更新博客列表
			 		if(res.data.code*1==200){
						uni.setStorageSync("user",res.data.result);
						this.blog=res.data.result;
			 		}
			 		//失败,code  201
			 		else{
							this.$u.toast("出错了");
			 		}
			 	}  
			 });
		
		},
		methods: {
			//点击博客
			goBoke(item){
				console.log("跳转到博客详情");
				uni.navigateTo({
					url: '/pages/TRH_pages/Showboke?item=' + encodeURIComponent(JSON.stringify(item))
				})
				
			},
			//点击关注
			guanzhu(){
				console.log("关注");
				if(getApp().globalData.globalUserid==0){
					this.$u.toast("关注失败！请先登录！");
				}
				else if(this.is_gz==false){  //添加关注
					uni.request({
					url:"http://localhost:9090/followOnly?userId="+this.myId+"&followId="+this.user.userId,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//成功，code 200,更新按钮样式
					 		if(res.data.code*1==200){
								this.is_gz=true;
								this.txt="已关注";
								this.b_yupe="default";
								
					 		}
					 		//失败,code  201
					 		else{
					 			this.$u.toast("关注失败，请重试！");
					 		}
					 	}  
					 });
				}
				else{				//取消关注
					uni.request({
					url:"http://localhost:9090/notFollowOnly?userId="+this.myId+"&followId="+this.user.userId,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//成功，code 200,更新按钮样式
					 		if(res.data.code*1==200){
								this.is_gz=false;
								this.txt="关注";
								this.b_yupe="primary";
								
					 		}
					 		//失败,code  201
					 		else{
					 			this.$u.toast("关注失败，请重试！");
					 		}
					 	}  
					 });
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}
	
	.text{
		display: -webkit-box; /*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 6; /*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden; /*溢出隐藏*/
	}

	.camera{
		width: 54px;
		height: 44px;

		&:active{
			background-color: #ededed;
		}
	}
	.user-box{
		background-color: #fff;
		}
	.titleText{		//博客标题的样式
		font-size: 20px;
				}
	.bokeTitle{		//博客标题
		width:60vw;
		height:100rpx;
		background: #ffffff;				
			}
	.bokeBody{		//博客主体
		width:60vw;
		height:300rpx;
		background: #ffffff;
		display:flex;
			}
	.boke{				//装博客 标题 容器的样式
		width:60vw;
		height:400rpx;
		background: #2979ff;
	}

	.boke_pic{			//博客图片
		width:40vw;
		height:400rpx;
		background: #ffffff;
		display:flex;
	}
	.allboke{    			//装博客+博客图片的容器样式 
		width:100vw;
		height:400rpx;
		background: #00ff00;
		display: flex;
		flex-direction: row;
		}

</style>
